<div class="sticky top-0 bg-components-panel-bg border-b-[0.5px] border-black/5 z-10">
  <div class="flex items-center px-4 pt-4 pb-1">
    @switch (type()) {
      @case (eWorkflowNodeTypeEnum.IF_ELSE) {
        <div class="flex items-center justify-center border-[0.5px] border-white/2 text-white bg-teal-500
              w-7 h-7 rounded-lg shadow-sm
              shrink-0 mr-1"
          [matTooltip]="key()"
          matTooltipPosition="above">
          <svg width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg" class="w-3.5 h-3.5" >
            <g id="icons/if-else"><path id="Vector (Stroke)" fill-rule="evenodd" clip-rule="evenodd" d="M8.16667 2.98975C7.80423 2.98975 7.51042 2.69593 7.51042 2.3335C7.51042 1.97106 7.80423 1.67725 8.16667 1.67725H11.0833C11.4458 1.67725 11.7396 1.97106 11.7396 2.3335V5.25016C11.7396 5.6126 11.4458 5.90641 11.0833 5.90641C10.7209 5.90641 10.4271 5.6126 10.4271 5.25016V3.91782L7.34474 7.00016L10.4271 10.0825V8.75016C10.4271 8.38773 10.7209 8.09391 11.0833 8.09391C11.4458 8.09391 11.7396 8.38773 11.7396 8.75016V11.6668C11.7396 12.0293 11.4458 12.3231 11.0833 12.3231H8.16667C7.80423 12.3231 7.51042 12.0293 7.51042 11.6668C7.51042 11.3044 7.80423 11.0106 8.16667 11.0106H9.49901L6.14484 7.65641H1.75C1.38756 7.65641 1.09375 7.3626 1.09375 7.00016C1.09375 6.63773 1.38756 6.34391 1.75 6.34391H6.14484L9.49901 2.98975H8.16667Z" fill="currentColor"></path></g>
          </svg>
        </div>
      }
      @case (eWorkflowNodeTypeEnum.NOTE) {
        <div class="flex items-center justify-center border-[0.5px] border-white/2 text-white bg-orange-500
          w-6 h-6 rounded-lg shadow-sm
          shrink-0 mr-2">
          <i class="ri-sticky-note-add-line"></i>
        </div>
      }
    }
    <input matInput class="grow mr-2 px-1 h-6 text-base text-gray-900 font-semibold rounded-lg border border-transparent appearance-none outline-none
                hover:bg-gray-50 
                focus:border-gray-300 focus:shadow-xs focus:bg-white caret-[#295EFF]
                 min-w-0"
          placeholder="{{'PAC.Xpert.AddTitle' | translate: {Default: 'Add title'} }}..."
          [(ngModel)]="title"
        >
    <div class="shrink-0 flex items-center text-gray-500">
      <a [href]="helpUrl() + '/docs/ai/workflow/node/ifelse'" target="_blank" class="flex items-center justify-center mr-1 w-6 h-6"
        [matTooltip]="'PAC.Xpert.HelpDocs' | translate: {Default: 'Help docs'}"
        matTooltipPosition="above">
        <i class="ri-book-open-line text-gray-500"></i>
      </a>
      <div class="inline-block">
        <div class="flex items-center justify-center w-6 h-6 rounded-md cursor-pointer hover:bg-black/5"
          [cdkMenuTriggerFor]="moreMenu"
        >
          <i class="ri-more-line"></i>
        </div>
      </div>
      <div class="mx-3 w-[1px] h-3.5 bg-divider-regular"></div>
      <div class="flex items-center justify-center w-6 h-6 cursor-pointer" (click)="closePanel()">
        <i class="ri-close-line"></i>
      </div>
    </div>
  </div>
  <div class="p-2">
    <div class="group flex px-2 py-[5px] max-h-[60px] rounded-lg overflow-y-auto border border-transparent hover:bg-gray-50 leading-0">
      <textarea matInput rows="1"
        class="w-full text-sm text-gray-900 leading-[18px] bg-transparent appearance-none outline-none resize-none
      placeholder:text-gray-400 caret-[#295EFF]" 
        style="resize: none; height: 18px;"
        placeholder="{{'PAC.Xpert.AddDescription' | translate: {Default: 'Add description'} }}..."
        cdkTextareaAutosize
        cdkAutosizeMinRows="1"
        cdkAutosizeMaxRows="5"
        [(ngModel)]="description"
      ></textarea>
    </div>
  </div>
</div>

@switch (type()) {
  @case (eWorkflowNodeTypeEnum.IF_ELSE) {
    <xpert-studio-panel-workflow-ifelse [node]="node()" [entity]="wfNode()" />
  }
}

@if (loading()) {
  <ngm-spin class="absolute top-0 left-0 w-full h-full"/>
}

<ng-template #moreMenu>
  <div cdkMenu class="cdk-menu__medium">
    <div class="h-[1px] bg-divider-regular my-1"></div>
    <div cdkMenuItem class="danger" (click)="remove()">
      {{ 'PAC.Workflow.Remove' | translate: {Default: 'Remove'} }}
    </div>
  </div>
</ng-template>